<template>
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item"
			v-for="(item, index) in list" 
			:key="index" 
			@click="tabbarChange(item.path, index)"
		>
			<image class="item-img" :src="item.icon_a" v-if="current == index"></image>
			<image class="item-img" :src="item.icon" v-else></image>
			<view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props: {
			current: Number
		},
		data() {
			return {
				paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
				list: [{
						text: '商品管理',  
						icon: '/static/tab111.png',  //未选中图标
						icon_a: '/static/tab112.png',  //选中图片
						path: "/pages/mine/shop/index/index",  //页面路径
					},{
						text: '订单管理',  
						icon: '/static/tab121.png',  //未选中图标
						icon_a: '/static/tab122.png',  //选中图片
						path: "/pages/mine/shop/orderList/orderList",  //页面路径
					},{
						text: '我的钱包',  
						icon: '/static/tab111.png',
						icon_a: '/static/tab112.png',
						path: "/pages/mine/shop/wallet/wallet",
					}
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		methods: {
			tabbarChange(path, index) {
				if(index == 0 || index == 2) {
					uni.$emit('clearSign');
				}
				uni.switchTab({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
    .tabbarActive{
        color: #769CFF !important;
    }
    .tabbar{
		z-index: 999;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100rpx;
		border-top: 1rpx solid #eee;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        .tabbar-item{
			flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100rpx;
            .item-img{
                width: 46rpx;
                height: 46rpx;
                margin-bottom: 4rpx;
            }
            .item-name{
                font-size: 26rpx;
                color: #A3A3A3;
            }
			&:nth-child(3) .item-img{
				position: absolute;
				top: -25rpx;
				width: 80rpx;
				height: 80rpx;
			}
			&:nth-child(3) .item-name{
				position: absolute;
				bottom: 9rpx;
			}
        }
    }
</style>
